<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
</head>
<body>
<!-- 导航栏、左侧用户信息区域、右侧博客列表区域 -->
<!-- 导航栏 -->
<div class="nav">
    <!-- logo -->
    <img src="./image/logo.png" alt="logo">
    <!-- 标题 -->
    <span class="head">我的博客系统</span>
    <!-- 空白占位符 -->
    <span class="spacer">开启知识海洋</span>
</div>
<!-- 注册页面的页面容器 -->
<div class="Register-container">
    <div class="Register-dialog">
            <h2>注 册</h2>
            <div class="row">
                <span>请输入邮箱:</span>
                <input type="text" id="EmailNumber" name="EmailNumber" placeholder="请输入8-24位邮箱账号">
            </div>
            <div class="row">
                <span>请设置密码:</span>
                <input type="password" id="password" name="password" placeholder="请设置8-16位登录密码">
            </div>
            <div class="row">
                <span>确认密码:</span>
                <input type="password" id="SurePassword" name="SurePassword" placeholder="请确认登录密码">
            </div>
            <div class="row">
                <input type="button" value="发送验证码" id="sendCode" name="sendCode">
                <input type="text" id="EmailCode" name="EmailCode" placeholder="请输入邮箱验证码" maxlength="6">
            </div>
            <div class="row">
                <a href="blog_login.html">已有账号？去登录</a>
            </div>
            <div class="row">
                <input type="button" value="提交" id="submit" name="submit">
            </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script >

    let EmailNum = document.querySelector("#EmailNumber");
    let button = document.querySelector("#sendCode");
    let Code = document.querySelector("#EmailCode");
    let password1 = document.querySelector("#password");
    let password2 = document.querySelector("#SurePassword");
    let button2 = document.querySelector("#submit");
    //发送验证码逻辑代码
    button.onclick = function(){
        let res = isRightEmailNum();
        if(res == true){
            jQuery.getJSON("register/sendEmailCode",
            {
                "emailId":jQuery.trim(EmailNum.value)
            },
            function(data){
                if(data.status == 1){
                    alert(data.message);
                }else{
                    alert(data.message);
                }
            }
            )
        }
    }
    function isRightEmailNum(){
        if(EmailNum.value == null || EmailNum.value == ""){
            alert("邮箱为空，请重新输入。");
            return false;
        }else if(EmailNum.value.length < 8 || EmailNum.value.length > 24){
            alert("邮箱格式有误，请核对后重新尝试发送。");
            return false;
        }else{
            return true;
        }

    }


    button2.onclick = function(){
        let res = isRightMessage();
        if(res == true){
        //发起ajax和后端进行交互
        jQuery.getJSON("register/Registration",
        {
            "emailId":jQuery.trim(EmailNum.value),
            "emailCode":jQuery.trim(Code.value),
            "passworda":jQuery.trim(password1.value),
            "passwordb":jQuery.trim(password2.value)
        },
        function(data){
            if(data.status == 1){
                alert(data.message);
                window.location.href='blog_login.html';
            }else{
                alert(data.message);
            }
        }
        )
    }
}
//校验输入框当中的内容格式是否正确
    function isRightMessage(){
        if(EmailNum.value == null || EmailNum.value == ""){
            alert("请输入邮箱");
            EmailNum.focus();
            return false;
        }
        if(Code.value == ""){
            alert("请输入验证码");
            Code.focus();
            return false;
        }
        if(password1.value == ""){
            alert("请输入密码");
            password1.focus();
            return false;
        }
        if(password2.value == ""){
            alert("请输入确认密码");
            password2.focus();
            return false;
        }
        if(password1.value.length < 8 || password1.value.length > 16){
            alert("密码长度不符合要求，请重新输入");
            password1.focus();
            return false;
        }
        if(password1.value.length != password2.value.length){
            alert("两次密码长度不一致，请重新输入~");
            password1.focus();
            return false;
        }
        return true;
    }
</script>
</body>
</html>